<template>
  <div>
    <img
      src="https://sh221109-srb.oss-cn-shanghai.aliyuncs.com/imgs/24.jpg"
      alt=""
    />
    <el-row>
      <el-col :span="3">
        <!-- 
            name:表单项上传组件的name值  后端接收时需要一致

            上传同时设置上传组件禁用：第三方组件无法实现

            上传成功后设置禁用：

        -->
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="uploadPath"
          :auto-upload="true"
          :disabled="importFlag"
          name="excel"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <el-button icon="el-icon-download" size="middle" type="primary"
            >导入excel
          </el-button>
        </el-upload>
      </el-col>
      <el-col :span="2">
        <el-button
          icon="el-icon-upload2"
          size="middle"
          type="primary"
          :disabled="exportFlag"
          @click="handleExportDicts"
          >导出excel
        </el-button>
      </el-col>
    </el-row>

    <el-table
      :data="pdicts"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="dictCode" label="编码"> </el-table-column>
      <el-table-column prop="value" label="值"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button size="mini" @click="handleAdd(scope.$index, scope.row)"
            >新增</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="dict">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="dict.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编码" :label-width="formLabelWidth">
          <el-input v-model="dict.dictCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <el-input v-model="dict.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveOrUpdateDict"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dictApi from "@/api/dict";
export default {
  data() {
    return {
      title: "更新数据字典",
      formLabelWidth: "120px",
      dict: {}, //要编辑的数据字典对象
      dialogFormVisible: false, //默认对话框不可见
      pdicts: [],
      importFlag: false,
      exportFlag: false,
      uploadPath: "http://localhost:8110/admin/core/dict/import",
    };
  },
  created() {
    //created 会在vue渲染页面之前自动执行
    this.initData();
  },
  methods: {
    handleAdd(idx, row) {
      //启动编辑时回显的dict对象的缓存
      this.dict = {};
      //将点击按钮所在行的数据字典的id 设置给即将新增的数据字典的父id
      this.dict.parentId = row.id;
      //修改标题
      this.title = "新增数据字典";
      this.dialogFormVisible = true;
    },
    //对话框的提交按钮单击事件
    handleSaveOrUpdateDict() {
      if (this.dict.id) {
        //更新
        this.updateDict();
      } else {
        //新增
        this.saveDict();
      }
    },
    saveDict() {
      //数据字典需要和它的上一级绑定
      dictApi.save(this.dict).then((r) => {
        this.$message.success(r.message);
        //关闭对话框
        this.dialogFormVisible = false;
        //延迟刷新页面
        setTimeout(() => {
          window.location.reload();
        }, 1500); //1.5秒后刷新页面
      });
    },
    updateDict() {
      dictApi.updateById(this.dict).then((r) => {
        this.$message.success(r.message);
        //关闭对话框
        this.dialogFormVisible = false;
        //延迟刷新页面
        setTimeout(() => {
          window.location.reload();
        }, 1500); //1.5秒后刷新页面
      });
    },
    //访问时 如果路径错误、请求方式错误 请求参数错误 都可能导致跨域
    handleEdit(idx, row) {
      console.log("编辑数据字典：", row, idx);
      //查询要编辑的数据字典设置到对话框中回显
      dictApi.getById(row.id).then((r) => {
        this.dict = r.data.item;
        //修改对话框的标题
        this.title = "更新数据字典";
        //显示对话框
        this.dialogFormVisible = true;
      });
    },
    handleDelete(idx, row) {
      console.log("删除数据字典：", row);
      dictApi.deleteById(row.id).then((r) => {
        this.$message.success(r.message);
        // this.initData();
        window.location.reload(); // = "http://localhost:9528/#/dict/list";
      });
    },
    //查询一级数据字典集合遍历展示
    initData() {
      dictApi.listByPid(1).then((r) => {
        this.pdicts = r.data.items;
      });
    },
    //根据一级数据字典id 查询它的下一级数据字典

    //点击hasChildren属性值为true行 的回调事件
    load(tree, treeNode, resolve) {
      //tree表示单击的行 json对象
      // tree.id表示要加载子数据字典的 父id
      //异步加载父id的下一级数据字典：
      dictApi.listByPid(tree.id).then((r) => {
        //将查询到的数据集合 解析展示到下一级
        resolve(r.data.items);
      });
      //使用resolve将查询到的数据字典集合 追加到当前节点的下一级展示
    },

    //导入数据字典按钮单击事件
    // handleImportDicts() {
    //   this.$refs.upload.submit();
    //   this.importFlag = true;
    //   //当设置上传组件不自动上传 需要我们手动上传文件
    //   //$refs代表本页面所有设置了ref值的标签对象    upload表示从$refs列表中根据名称匹配标签
    //   // this.$forceUpdate();
    // },
    //导出数据字典列表
    handleExportDicts() {
      this.exportFlag = true;
      window.location.href = "http://localhost:8110/admin/core/dict/export";
    },
    //响应报文状态码为200时回调
    handleUploadSuccess(response, file, fileList) {
      this.importFlag = true; //设置上传组件禁用
      console.log(response);
      if (response.code === 0) {
        this.$message.success(response.message);
      } else {
        this.$message.error(response.message);
      }
    },
    //响应报文状态码不为200时回调
    handleUploadError(err, file, fileList) {
      this.importFlag = false;
      //console.log(err);
      this.$message.error("网络连接失败");
    },
  },
};
</script>
